<template>
  <div class="dashboard-container">
    <div v-loading="loading" class="app-container">
      <!-- 个人信息 -->
      <el-card>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="姓名" prop="studentname">
            <el-input v-model="form.studentname" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="学号" prop="studentid">
            <el-input v-model="form.studentid" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-form-item label="学院班级">
            <el-cascader
              v-model="label"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="头像">
            <UploadFile ref="uploadRef" :photo-list="photoList" :objid="form.studentname" :objtype="'user'" @changeFileList="changeFileList" />
          </el-form-item>
          <el-form-item label="个人评价(选填)" prop="detail">
            <el-input v-model="form.detail" />
          </el-form-item>
          <el-form-item class="loginregister">
            <el-button @click="backUser">取消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { addUser } from '@/api/user'
import { deletePhoto } from '@/api/photo'

export default {
  // props可以用数组来接收数据 也可以用对象来接收
  // props: {   props属性: {  配置选项 }  }
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      photo: '',
      file: {},
      photoList: [],
      form: {
        studentname: '',
        sex: '1',
        phone: '',
        studentid: '',
        detail: '',
        college: '',
        classname: ''
      },
      rules: {
        studentname: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '电话不能为空', trigger: 'blur' },
          { min: 10, max: 15, message: '长度在 10 到 15 个字符', trigger: 'blur' }
        ],
        studentid: [
          { required: true, message: '学号不能为空', trigger: 'blur' },
          { min: 9, max: 12, message: '长度在 9 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
      options: [{
        value: '软件学院',
        label: '软件学院',
        children: [{
          value: '物联网班',
          label: '物联网班'
        }, {
          value: '软件工程班',
          label: '软件工程班'
        }]
      },
      {
        value: '文传院',
        label: '文传院',
        children: [{
          value: '播音班',
          label: '播音班'
        }, {
          value: '主持班',
          label: '主持班'
        }, {
          value: '新媒体班',
          label: '新媒体班'
        }]
      },
      {
        value: '机电院',
        label: '机电院',
        children: [{
          value: '机械班',
          label: '机械班'
        }, {
          value: '机器人班',
          label: '机器人班'
        }]
      },
      {
        value: '音乐与舞蹈学院',
        label: '音乐与舞蹈学院',
        children: [{
          value: '声乐班',
          label: '声乐班'
        }, {
          value: '舞蹈班',
          label: '舞蹈班'
        }]
      },
      {
        value: '美术学院',
        label: '美术学院',
        children: [{
          value: '美教班',
          label: '美教班'
        }, {
          value: '艺术班',
          label: '艺术班'
        }]
      }],
      label: []
    }
  },
  methods: {
    changeFileList(val) {
      this.photoList = val
    },
    handleChange() {
      this.form.college = this.label[0]
      this.form.classname = this.label[1]
    },
    onSubmit() {
      if (this.photoList.length === 0 && this.$refs.uploadRef.getHasUploadFiles().length === 0) {
        this.$message.error('请上传用户头像')
        return
      }
      this.$refs.formRef.validate(isOk => {
        if (isOk) {
          this.loading = true
          this.form.sex = this.form.sex.toString()
          this.form.phone = this.form.phone.toString()
          this.$refs.uploadRef.saveImgAll().then((res) => {
            if (this.$refs.uploadRef.getHasUploadFiles().length !== 0 && this.photoList.length !== 0) {
              deletePhoto(this.hasUploadFiles[0].photo, this.objid)
            }
            this.loading = false
            addUser(this.form).then(() => {
              this.loading = false
              this.$message.success('注册成功')
              this.backUser()
            })
          })
        }
      })
    },
    backUser() {
      const form = this.form
      for (const i in form) {
        form[i] = ''
      }
      form.sex = '0'
      this.form = form
      if (this.$route.path.indexOf('login') !== -1) {
        this.$emit('closeDrawer')
      } else {
        this.$router.push('/users')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dashboard-container{
    color: #000;
}
  .btn {
    display: flow;
    float: right;
  }
</style>
